
<script setup lang="ts" name="App01">
    import { RouterLink,RouterView } from 'vue-router';
    import Header from '@/components/Header.vue'
</script>

<template>
   <h1>APP组件</h1>
   <!-- 头部 - 一般组件 -->
   <Header/>
   <!-- 导航区 -->
    <div class="nav">
         <!-- to字符串的写法 -->
        <!-- <RouterLink active-class="active" to="/home">首页</RouterLink> -->
        <!-- to的对象形式的写法 -->
        <!-- <router-link active-class="active" :to="{path:'/about'}">关于我们</router-link> -->

        <!-- 命名路由的跳转 - 对象形式 -->
        <RouterLink active-class="active" :to="{name:'homes'}">首页</RouterLink> 
        <RouterLink name="ab" active-class="active" :to="{name:'abouts'}">关于我们</RouterLink>
        <RouterLink active-class="active" :to="{name:'news'}">新闻</RouterLink>  
    </div>

   <!-- 展示区 -->
   <div class="content">
      <!-- 路由key对应的组件显示的区域 -->
      <!-- <RouterView/> -->
      <!-- <router-view/> -->
      <router-view></router-view>
      <hr>
      <router-view name="ab"></router-view>
    </div>
</template>

<!-- css样式 -->
<style scoped>
    .nav>.active{
        background-color: red;
        color: #fff;
    }
    .nav{
        display: flex;
        /* justify-content: space-around; */
    }
   .nav>a{
      display: block;
      width: 100px;
      height: 30px;
      background-color: #ccc;
      text-decoration: none;
      border-radius: 5px;
      padding: 5px;
      color: #333;
      margin-left: 10px;
   }
</style>
